<template v-slot:headerContentRender>
  <!-- :title="false" -->

  <!-- 预算条件 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="门店" :required="true">
              <a-select placeholder="请选择门店" v-model="pagination.storeId">
                <a-select-option :value="item.storeId" v-for="(item, index) in storesList" :key="index">{{
                  item.storeName
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="预算周期">
              <a-select placeholder="请选择预算周期" v-model="pagination.type" :allow-clear="true">
                <a-select-option :value="item.id" v-for="(item, index) in typeList" :key="index">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="是否已归档">
              <a-select placeholder="请选择是否已归档" v-model="pagination.archived" :allow-clear="true">
                <a-select-option :value="item.id" v-for="(item, index) in archivedList" :key="index">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="10" :sm="24">
            <a-form-item label="预算日期">
              <!-- :disabled-date="disabledDate" -->
              <a-range-picker
                placement="bottomLeft"
                v-model="BeginAndEnd"
                @calendarChange="calendarPriceRangeChange"
                @change="pickerChange"
                format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
          <a-col :md="14" :sm="24">
            <a-form-item label="状态集">
              <a-select placeholder="请选择状态集" v-model="pagination.states" :allow-clear="true" mode="multiple">
                <a-select-option :value="item.id" v-for="(item, index) in statesList" :key="index">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" style="margin-bottom: 10px;width: 200px;">
            <a-form-item>
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="onReset">重置</a-button>
            </a-form-item>

          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="filter-container">
      <template>
        <div>
          <a-button type="primary" v-checkBtn="'add:budget'" @click="onAdd" icon="plus" style="margin-right: 20px;">
            新增预算
          </a-button>
          <!-- <a-button type="primary" @click="onFillData" icon="plus">
                            填报
                        </a-button> -->
        </div>
      </template>
    </div>
    <a-back-top />
    <div>
      <template>
        <!-- class="vTable" -->
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :loading="loading"
          :rowKey="(record) => { return record.budgetId }"
          :scroll="{ x: 900, y: 600 }"
          :pagination="pagination">
          <template slot="budgetType" slot-scope="text,record">
            <span>
              {{ record.budgetType == 1 ? '年度预算' : '月度预算' }}
            </span>
          </template>
          <template slot="state" slot-scope="text,record">
            <!-- <span>
                                {{ record.state == 1 ? '已创建' :
                                    record.state == 2 ? '已提交' :
                                        record.state == 3 ? '返回' :
                                            record.state == 4 ? '已审批' :
                                                record.state == 5 ? '已作废' :
                                                    record.state == 6 ? '已删除' : '' }}
                            </span> -->
            <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
          </template>
          <template slot="archived" slot-scope="text,record">
            <span>
              <a-tag color="blue" v-if="record.archived == 1">是</a-tag>
              <a-tag color="#ff9900" v-else-if="record.archived == 0">否</a-tag>
            </span>
            <!-- <span>
                                {{ record.archived == 1 ? '是' : '否' }}
                            </span> -->
          </template>
          <span slot="action" slot-scope="text, record">
            <!--状态集，1:新建，2：已提交，3：退回，4：已审批，5：已作废，6：已删除，状态用‘,’分格-->
            <div v-checkBtn="'edit:budget'">
              <div style="margin-bottom: 4px;" v-if="record.state == 1 || record.state == 3">
                <!-- 只能更改创建和退回状态的预算 -->
                <a href="javascript:;" @click="onEdit(record)">更改预算</a>
              </div>
            </div>
            <div v-checkBtn="'audit:budget'">
              <div style="margin-bottom: 4px;" v-if="record.state == 2 || record.state == 4">
                <!-- 只能审核提交的预算 -->
                <a href="javascript:;" @click="onAudit('audit', record)">审核预算</a>
              </div>
            </div>
            <div v-checkBtn="'del:budget'">
              <!-- || record.state == 6 -->
              <div style="margin-bottom: 4px;" v-if="record.state == 1">
                <!-- 只能删除创建和退回的预算 -->
                <a href="javascript:;" @click="onAudit('del', record)">删除预算</a>
              </div>
            </div>
            <div v-checkBtn="'submit:budget'">
              <div style="margin-bottom: 4px;" v-if="record.state == 1 || record.state == 3">
                <!-- 只能提交创建和退回的预算 -->
                <a href="javascript:;" @click="onSubmit(record)">提交预算</a>
              </div>
            </div>
            <!-- 预算详情-->
            <div v-checkBtn="'details:budget'">
              <div style="margin-bottom: 4px;">

                <a href="javascript:;" @click="onDetails(record)">预算详情</a>
              </div>
            </div>

          </span>
        </a-table>
      </template>
    </div>
    <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
    <!-- 提交预算 -->
    <submitModal ref="submitModal" v-if="dialog.submit" @success="tableData" @close="dialog.submit = false">
    </submitModal>
    <!-- 审核预算 -->
    <auditModal ref="auditModal" v-if="dialog.audit" @success="tableData" @close="dialog.audit = false">
    </auditModal>
    <!-- 月度预算详情 -->
    <budgetDetails ref="budgetDetails" v-if="dialog.monthBudgetDetails" @close="dialog.monthBudgetDetails = false">
    </budgetDetails>
    <!--年度预算详情 -->
    <budgetYearDetails ref="budgetYearDetails" v-if="dialog.yearBudgetDetails" @close="dialog.yearBudgetDetails = false">
    </budgetYearDetails>
    <!-- 更改预算 -->
    <editModal ref="editModal" v-if="dialog.edit" @success="tableData" @close="dialog.edit = false"></editModal>

    <!-- 填报 -->
    <fillDataModal ref="fillDataModal" v-if="dialog.fillData" @success="tableData" @close="dialog.fillData = false">
    </fillDataModal>
    <!-- 更改月度预算弹窗 -->
    <tableSaveModal ref="tableSaveModal" v-if="dialog.tableSave" @success="tableData" @close="dialog.tableSave = false">
    </tableSaveModal>

    <!-- 更改年度预算 -->
    <tableSaveYearModal
      ref="tableSaveYearModal"
      v-if="dialog.tableSaveYear"
      @success="tableData"
      @close="dialog.tableSaveYear = false">
    </tableSaveYearModal>
  </a-card>
</template>

<script>

import { getBudgets } from '@/api/budget'
import { getStores } from '@/api/stores'
import moment from 'moment'
import saveModal from './save'
import editModal from './editSave'
import submitModal from './submitSave'
import auditModal from './auditSave'
import budgetDetails from './budgetDetails'
import budgetYearDetails from './budgetYearDetails'
import fillDataModal from './fillData'
import tableSaveModal from './tableSave'
import tableSaveYearModal from './tableSaveYear'
import { Modal } from 'ant-design-vue'

const statusMap = {
  1: {
    status: 'success',
    text: '已创建'
  },
  2: {
    status: 'processing',
    text: '已提交'
  },
  3: {
    status: 'warning',
    text: '已返回'
  },

  4: {
    status: 'success',
    text: '已审批'
  },
  5: {
    status: 'error',
    text: '已作废'
  },
  6: {
    status: 'default',
    text: '已删除'
  }
}
export default {
  components: { saveModal, submitModal, auditModal, budgetDetails, editModal, fillDataModal, tableSaveModal, tableSaveYearModal, budgetYearDetails },
  data () {
    return {
      // 高级搜索 展开/关闭
      advanced: false,

      columns: [
        {
          title: '门店',
          dataIndex: 'storeName',
          key: 'storeName',
          align: 'center',
          width: 150
        },
        {
          title: '预算日期',
          dataIndex: 'budgetDate',
          key: 'budgetDate',
          align: 'center',
          width: 120
        },
        {
          title: '预算类型',
          dataIndex: 'budgetType',
          key: 'budgetType',
          align: 'center',
          width: 120,
          scopedSlots: { customRender: 'budgetType' }
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          key: 'createdTime',
          align: 'center',
          width: 160
        },
        {
          title: '预算状态',
          dataIndex: 'state',
          key: 'state',
          align: 'center',
          width: 120,
          needTotal: true,
          scopedSlots: { customRender: 'state' }
        },
        {
          title: '是否已归档',
          dataIndex: 'archived',
          key: 'archived',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'archived' }
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          align: 'center',
          // fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      dialog: {
        save: false,
        submit: false,
        audit: false,
        details: false,
        edit: false,
        fillData: false,
        tableSave: false,
        // 年度预算
        tableSaveYear: false,

        monthBudgetDetails: false,
        yearBudgetDetails: false
      },
      loading: false,
      pagination: {
        // 分页配置
        pageSize: 20, // 每页显示的条数
        showQuickJumper: true, // 是否可以快速跳转到指定页
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 6, // 总条数
        storeId: undefined,
        type: undefined,
        archived: undefined,
        states: undefined,
        beginDate: '',
        endDate: '',
        onChange: this.handlePageChange // 页码改变时的回调函数
      },
      typeList: [
        { id: 1, name: '年度预算' },
        { id: 2, name: '月度预算' }
      ],
      archivedList: [
        { id: 1, name: '是' },
        { id: 0, name: '不是' }
      ],
      statesList: [
        { id: 1, name: '新建' },
        { id: 2, name: '已提交' },
        { id: 3, name: '退回' },
        { id: 4, name: '已审批' },
        { id: 5, name: '已作废' },
        { id: 6, name: '已删除' }
      ],
      BeginAndEnd: [],
      selectPriceDate: '',
      storesList: []// 门店
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  mounted () {
    this.Stores()
    this.tableData()
  },
  methods: {
    // 门店
    Stores () {
      getStores({ storeName: '' }).then(res => {
        if (res.code == 200) {
          this.storesList = res.data
          // this.pagination.total = res.data.total
        }
      })
    },
    // 填报
    onFillData () {
      this.dialog.fillData = true
      this.$nextTick(() => {
        this.$refs.fillDataModal.open()
      })
    },
    // 更改预算
    onEdit (row) {
      if (row.budgetType == 1) {
        this.dialog.tableSaveYear = true
        this.$nextTick(() => {
          this.$refs.tableSaveYearModal.open('edit', row)
        })
      } else {
        this.dialog.tableSave = true
        this.$nextTick(() => {
          this.$refs.tableSaveModal.open('edit', row)
        })
      }

      // this.dialog.edit = true
      // this.$nextTick(() => {
      //     this.$refs.editModal.open(row)
      // })

      // this.dialog.save = true
      // this.$nextTick(() => {
      //     this.$refs.saveModal.open('edit').setData(row)
      // })
    },
    // 预算详情
    onDetails (row) {
      if (row.budgetType == 1) {
        this.dialog.yearBudgetDetails = true
        this.$nextTick(() => {
          this.$refs.budgetYearDetails.open(row)
        })
      } else {
        this.dialog.monthBudgetDetails = true
        this.$nextTick(() => {
          this.$refs.budgetDetails.open(row)
        })
      }
    },
    // 预算审核和删除预算
    onAudit (type, row) {
      this.dialog.audit = true
      this.$nextTick(() => {
        this.$refs.auditModal.open(type).setData(row)
      })
    },
    // 提交预算
    onSubmit (row) {
      this.dialog.submit = true
      this.$nextTick(() => {
        this.$refs.submitModal.open().setData(row)
      })
    },
    // 新增预算
    onAdd () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveModal.open('add')
      })
    },
    // 时间范围
    pickerChange (val) {
      this.selectPriceDate = ''
      const valueTime = val.map(item => {
        return moment(item).format('YYYY-MM-DD')
      })
      this.pagination.beginDate = valueTime[0]
      this.pagination.endDate = valueTime[1]
    },

    // 选择开始时间/结束时间
    calendarPriceRangeChange (date) {
      this.selectPriceDate = date[0]
    },
    // 根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate (current) {
      if (this.selectPriceDate) {
        const selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        return current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') || current > moment().endOf('day') || current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')
      } else {
        return current && current > moment().endOf('day')
      }
    },
    // 高级搜索切换
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    // 搜索
    onSearch () {
      const { storeId } = this.pagination
      const par = {
        storeId: storeId == undefined ? '' : storeId
      }
      if (par.storeId == '') {
        this.$notification['error']({
          message: '提示',
          description: '请选择门店',
          duration: 8
        })
        return
      }
      // console.log(this.pagination.states)
      this.pagination.current = 1
      this.pagination.pageSize = 6
      this.tableData()
    },
    // 重置
    onReset () {
      this.pagination = {
        // 分页配置
        pageSize: 20, // 每页显示的条数
        showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
        current: 1, // 当前页数
        total: 6, // 总条数
        type: undefined,
        archived: undefined,
        states: undefined,
        storeId: undefined,
        beginDate: '',
        endDate: ''
      }
      this.selectPriceDate = ''
      this.BeginAndEnd = []
      this.tableData()
    },
    // 访问资源类型
    onResourceType (e) {
      this.pagination.resourceType = e
    },
    handlePageChange (page, pageSize) {
      this.pagination.current = page
      this.tableData()
    },
    // 新增
    add () {
      this.dialog.save = true
      this.$nextTick(() => {
        this.$refs.saveModal.open()
      })
    },

    onClosed () {
      this.dialog.save = false
    },
    tableData () {
      this.loading = true
      this.dialog.save = false
      const par = {
        ...this.pagination
      }
      if (par.type == undefined) par.type = ''
      if (par.archived == undefined) par.archived = ''
      if (par.states == undefined) par.states = ''
      if (par.storeId == undefined) par.storeId = ''
      getBudgets(par).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data.datas
          this.pagination.total = res.data.total
        }
        this.loading = false
      })
    },

    onDel (row) {
      const _this = this
      Modal.confirm({
        title: '删除信息',
        content: '确定要删除吗？',
        onOk: () => {
          deleteTenants(row.tenantId).then(res => {
            if (res.code == 200) {
              _this.tableData()
              _this.$message.success('删除成功')
            } else {
              _this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less" >
// .vTable {
//     height: 400px;
//     overflow-y: auto;
//     overflow-x: hidden;
// }

.send-display-container {
  width: 100%;
  background-color: #ffffff;
  padding: 24px;
}

.filter-container {
  display: flex;
  align-items: center;
  padding-bottom: 24px;
  justify-content: left;

  .label {
    padding-right: 20px;

    white-space: nowrap;
  }

  .input-container {
    width: 300px;
    margin-right: 20px
  }

  .btn {
    margin-right: 20px;
  }
}

// /deep/ .ant-modal {
//     min-width: 700px;
//     margin-left: 30%;
// }
// /deep/ .ant-modal-body {
//     width: 700px;
// }
</style>
